import React, { Component } from "react";
import { Link } from "react-router-dom";
import { bill_search, print_excell } from "../../api/bill_search";
import { downloadFile } from "../../utils/downloadFile";
import {
  SearchOutlined,
  CloudDownloadOutlined,
  RedoOutlined,
  EllipsisOutlined,
} from "@ant-design/icons";
import {
  message,
  Breadcrumb,
  Card,
  Table,
  Button,
  Pagination,
  Form,
  Input,
  Row,
  Col,
  DatePicker,
} from "antd";
import moment from "moment";
const { RangePicker } = DatePicker;
const { Item } = Form;

export default class Bill extends Component {
  state = {
    loading: false,
    pagenum: 1,
    pagesize: 3,
    end_mark: "",
    sup_name: "",
    end_time: "",
    total: 0,
    billList: [],
  };

  //获取列表数据
  getBillList = async () => {
    const { pagenum, pagesize } = this.state;
    const paramsInfo = {
      pagenum: pagenum,
      pagesize: pagesize,
    };
    if (this.state.end_mark || this.state.sup_name || this.state.end_time) {
      paramsInfo.end_mark = this.state.end_mark;
      paramsInfo.sup_name = this.state.sup_name;
      paramsInfo.end_time = this.state.end_time;
    }
    this.setState({ loading: true });
    try {
      let { data: res } = await bill_search(paramsInfo);
      this.setState({ loading: false });
      if (res && res.code === 200) {
        console.log(res);
        const billList = res.data.current_page_data;
        const total = res.data.data_sum;
        this.setState({
          billList,
          total,
        });
      } else {
        message.error(res.message);
      }
    } catch (err) {
      message.error("连接失败，请检查网络");
    }
  };
  //查询
  onFinish = (values) => {
    console.log(values);
    this.setState({}, () => {
      this.setState({
        end_mark: values.end_mark,
        sup_name: values.sup_name,
        end_time: values.end_time,
        pagenum: 1,
        pagesize: 3,
      });
    });
    this.getBillList();
    console.log("Success:", values);
  };
  //分页
  pagenumChange = (pagenum) => {
    this.setState({ pagenum }, () => {
      this.getBillList();
    });
  };
  pagesizeChange = (current, pagesize) => {
    this.setState({ pagesize }, () => {
      this.getBillList();
    });
  };
  //详情页
  toDetail = (row) => {
    console.log(row);
    let id = row.id;
    window.sessionStorage.setItem("goods", JSON.stringify(row.goods));
    this.props.history.push(`/billDetail/${id}`);
  };
  //导出excel
  exportExcel = async (row) => {
    let id = row.id;
    try {
      let { data: res } = await print_excell({ id });
      if (res) {
        downloadFile(res, "寄存物资补库交接单.xlsx");
        message.success("导出寄存物资补库交接单成功");
      } else {
        message.error(res.message);
      }
    } catch (err) {
      this.$message.error("连接失败，请检查网络");
    }
  };
  componentDidMount() {
    this.getBillList();
  }

  render() {
    const columns = [
      {
        title: "入库单编号",
        dataIndex: "end_mark",
        align: "center",
      },
      {
        title: "供应商",
        dataIndex: "sup_name",
        align: "center",
      },
      {
        title: "到货时间",
        dataIndex: "end_time",
        align: "center",
      },

      {
        title: "操作",
        fixed: "right",
        width: 100,
        align: "center",
        render: (row) => {
          return (
            <div>
              <Button
                onClick={() => this.toDetail(row)}
                type="success"
                shape="circle"
                icon={<EllipsisOutlined />}
              />
              <Button
                onClick={() => this.exportExcel(row)}
                type="primary"
                shape="circle"
                icon={<CloudDownloadOutlined />}
              />
            </div>
          );
        },
      },
    ];
    const { loading, pagenum, pagesize, total, billList } = this.state;
    const dateFormat = "YYYY-MM-DD";
    return (
      <div>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/">Admin</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          <Breadcrumb.Item>供应商管理</Breadcrumb.Item>
        </Breadcrumb>

        <Card>
          <Form
            onFinish={this.onFinish}
            ref={(c) => (this.addform = c)}
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
          >
            <Row gutter={20}>
              <Col span={6}>
                <Item label="入库单编号" name="end_mark">
                  <Input />
                </Item>
              </Col>

              <Col span={6}>
                <Item label="供应商" name="sup_name">
                  <Input />
                </Item>
              </Col>

              <Col span={6}>
                <Item label="到货时间" name="end_time">
                  <RangePicker format={dateFormat} />
                </Item>
              </Col>

              <Col span={2.5}>
                <Item>
                  <Button
                    htmlType="submit"
                    type="primary"
                    icon={<SearchOutlined />}
                  >
                    查询
                  </Button>
                </Item>
              </Col>

              <Col span={2.5}>
                <Item>
                  <Button type="info" icon={<RedoOutlined />}>
                    重置
                  </Button>
                </Item>
              </Col>
            </Row>
          </Form>

          <Table
            rowKey="id"
            bordered
            loading={loading}
            dataSource={billList}
            columns={columns}
            pagination={false}
          />

          <Pagination
            style={{ marginTop: "25px" }}
            current={pagenum}
            total={total}
            pageSize={pagesize}
            pageSizeOptions={["1", "2", "5", "10"]}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `共 ${total} 条`}
            onChange={(pagenum) => this.pagenumChange(pagenum)}
            onShowSizeChange={(current, pagesize) =>
              this.pagesizeChange(current, pagesize)
            }
          />
        </Card>
      </div>
    );
  }
}
